<template>
  <div class="payment_status">
    <div class="status_top">
      <van-icon :name="statusIcon" :class="statusClass" />
      <div>{{statusText}}</div>
    </div>

    <div class="status_text" v-if="isSuccess"><span class="red">3秒</span>后返回到商品详情, 您也可以查看订单详情</div>
    <div class="status_text" v-else>系统繁忙, 支付遇到问题, 请您稍后再试!</div>

    <div class="status_goLink">
      <router-link class="red" :to="{name: 'orders' , query: { type: 1 }}">查看订单详情<van-icon name="arrow" /></router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'payment-result',
  props: {
    status: String
  },
  data () {
    return {
      isSuccess: true
    }
  },
  computed: {
    statusText () {
      return this.isSuccess ? '支付成功' : '支付失败'
    },
    statusIcon () {
      return this.isSuccess ? 'checked' : 'fail'
    },
    statusClass () {
      return this.isSuccess ? 'success_icon' : 'fail_icon'
    }
  },
  activated () {
    this.isSuccess = this.status === 'success'
  }
}
</script>

<style lang="less">
  .payment_status {
    padding-top: 30px;
    box-sizing: border-box;
    background-color: #fff;
    text-align: center;
  }

  .status_top {
    margin-bottom: 15px;
    i {
      margin-bottom: 5px;
    }
    > div {
      font-size: 18px;
    }
  }

  .status_text {
    //color: $font-color-gray;
    margin-bottom: 50px;
  }

  .status_icon {
    font-size: 80px;
  }

  i.success_icon {
    font-size: 80px;
    color: #06bf04;
  }

  i.fail_icon {
    font-size: 80px;
    color: #f44;
  }
</style>
